<template>
  <div class="main">
    <div class="header">
      <div class="title"> <i class="iconfont">&#xe838;</i> 最新动态</div>
      <div class="more" @click="gotoSquare()">更多<i class="iconfont">&#xe61f;</i></div>
    </div>

    <div class="list">
      <TransitionGroup name="list">
      <div class="item" v-for="item in this.activeList" :key="item.id">
        <div class="avatar" @click="openusercard(item.userid)">
          <avatar v-if="item.useravatar" size="40" shape="square" :url="item.useravatar"></avatar>
          <avatar v-else size="42" shape="square"></avatar>
        </div>
        <div class="nameandcontent">
          <div class="name">
            {{item.username}}
            <span class="time">{{day(item.date).locale('zh-cn').fromNow()}}</span>
          </div>
          <div class="content">{{ item.content }}</div>
        </div>
      </div>
      </TransitionGroup>
    </div>

    <!-- 用户信息 -->
    <userDialog
    :show-modal="showUserModal"
    @close="showUserModal = false"
    :userid="userCardid"
    />
  </div>
</template>
<script>
// 引入用户卡组件
import userDialog from '@/views/square/components/userdialog.vue'
import { getbroadcastMessage } from '@/api/comments'
import avatar from '@/components/library/avatar.vue'
// 时间戳处理包
const dayjs = require('dayjs')
const relativeTime = require('dayjs/plugin/relativeTime')
dayjs.extend(relativeTime)
require('dayjs/locale/zh-cn')
export default {
  name: 'newMessage',
  data () {
    return {
      allList: [],
      activeList: [],
      timeInterval: '',
      // 点击头像显示用户基本信息
      // 用户卡片框的显示
      showUserModal: false,
      // 卡片框渲染的用户的id
      userCardid: 0
      // 获取用户数据 从vuex
    }
  },
  components: {
    avatar,
    userDialog
  },
  methods: {
    // 打开用户信息卡
    openusercard (id) {
      this.showUserModal = true
      this.userCardid = id
    },
    gotoSquare () {
      this.$router.push('/Square')
    }
  },
  created () {
    getbroadcastMessage().then((res) => {
      // console.log(res)
      this.allList = res.data.listmsg
      // 取五条为最初渲染数据
      this.allList.forEach((item, index) => {
        if (index < 5) {
          this.activeList.push(item)
        }
      })
      const listLength = this.allList.length - 1
      let index = listLength
      // 设置定时器 每两秒
      this.timeInterval = setInterval(() => {
        // console.log(this.activeList)
        // this.activeList.unshift(this.allList[index])
        this.activeList.shift()
        this.activeList.push(this.allList[index])
        index++
        if (index > listLength) {
          index = 0
        }
      }, 2000)
    })
  },
  unmounted () {
    clearInterval(this.timeInterval)
  }
}
</script>
<style scoped lang="less">
.main{
  border-radius: 20px;
  border: 1px solid #e9e9e9;
  padding: 20px;
  background-color: #f1f1f1;
  height: 450px;
  width: 320px;
  .header{
    height: 30px;
    line-height: 20px;
    width: 100%;
    .title{
      font-family: '钉钉进步体';
      font-size: 20px;
      float: left;
      color:#3e87e5;
      .iconfont{
        font-size: 20px;
      }
    }
    .more{
      float: right;
      color: #666;
      cursor: pointer;
      &:hover{
        color: #3e87e5;
      }
    }
  }
  .list{
    position: relative;
    left: 20px;
    top: 20px;
  }
  .item{
    border-radius: 10px;
    margin-bottom: 10px;
    height: 60px;
    display: flex;
    .avatar{
      cursor: pointer;
      position: relative;
      top: 6px;
    }
    .nameandcontent{
      .name{
        position: relative;
        text-indent: 20px;
        font-size: 10px;
        font-family: '钉钉进步体';
        color: #000000;
        width: 100%;
        line-height: 30px;
        height: 20px;
        .time{
          color: #666;
          position: absolute;
          right: 10px;
        }
      }
      .content{
        line-height: 15px;
        font-size: 10px;
        width: 200px;
        height: 30px;
        overflow: hidden;
        color: #666;
      }
    }
  }
}

//评论列表渲染动画
  .list-move, /* 对移动中的元素应用的过渡 */
  .list-enter-active,
  .list-leave-active {
    transition: all 0.5s ease;
  }

  .list-enter-from,
  .list-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }

  /* 确保将离开的元素从布局流中删除
    以便能够正确地计算移动的动画。 */
  .list-leave-active {
    position: absolute;
  }
</style>
